<template>
  <div class="bg">
    <div class="loginbox">
      <div class="left"></div>
      <div class="right">
        <h1>后台登录</h1>
        <div class="content">
          <el-form :model="loginObj" :rules="rules" ref="loginForm">
            <el-form-item prop="username">
              <el-input
                prefix-icon="cxfont cx-yonghu1"
                placeholder="用户名"
                v-model="loginObj.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                prefix-icon="cxfont cx-mima"
                placeholder="密码"
                type="password"
                v-model="loginObj.password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btn" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { loginAdmin } from "../../api";
import { mapMutations } from "vuex";
import md5 from "js-md5";
export default {
  data() {
    return {
      loginObj: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    ...mapMutations("login", ["setUserInfo"]),
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 表单验证通过
          var newLogin = {
            username: this.loginObj.username,
            password: md5(this.loginObj.password)
          };
          // console.log(md5(this.loginObj.password));
          loginAdmin(newLogin)
            .then(data => {
              if (data.code == 200) {
                // 登陆成功
                console.log(data);
                this.setUserInfo(data.data);
                this.$router.push({ name: "home" });
              } else {
                this.$message({
                  message: "用户名或密码错误",
                  duration: 1000
                });
              }
            })
            .catch(err => {
              this.$message({
                message: "请求超时",
                duration: 1000
              });
            });
        } else {
          this.$message({
            message: "请输入正确的表单信息",
            duration: 1000,
            type: "error"
          });
        }
      });
    }
  },
  computed: {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.bg {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/cloud.jpg") repeat-x 0 bottom #049ec4;
  //   background-color: #049ec4;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: move 20s linear 0s infinite both;
  -webkit-animation: move 20s linear 0s infinite both;
  .loginbox {
    width: 1000px;
    height: 500px;
    background: red;
    display: flex;
    // display: none;
    border-radius: 10px;
    overflow: hidden;
    .left {
      flex: 1;
      height: 500px;
      background: #409eff;
    }
    .right {
      flex: 1;
      height: 500px;
      background: #fff;
      h1 {
        font-size: 38px;
        color: #000;
        text-align: center;
        font-weight: bold;
        padding: 50px 0;
      }
      .content {
        width: 300px;
        margin: 0 auto;
        /deep/.el-input__inner {
          border: none;
          border-bottom: 1px solid #8fd26e;
          border-radius: 0;
          margin-bottom: 10px;
        }
        /deep/i {
          color: #c3c7cf !important;
        }
        .btn {
          width: 100%;
          display: block;
          background: #fff;
          border: 1px solid #77baff;
          color: #77baff;
          margin-top: 30px;
        }
      }
    }
  }
}

@keyframes move {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -2000px;
  }
}
</style>